<template>
  <view class="content colorB">
    <view class="revenList flex justify-between">
      <view class="border-10 colorF" style="width: 187rpx;height: 73rpx; background-color: #363f51;"
        v-for="(item,index) in revenue" :key="index" :class="{'active':current === index}" @click="checked(index)">
        <view>
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="">
      <view class="" v-if="current=== 0">
        <revenueLine></revenueLine>
      </view>
      <view class="" v-if="current=== 1">
        <!-- <search :text="text"></search> -->
        <stationDetail></stationDetail>
      </view>
      <view class="" v-if="current=== 2">
        <!-- <search :text="text"></search> -->
        <equipment></equipment>
      </view>
    </view>
  </view>
</template>

<script>
  import stationDetail from '@/pages/revenue/stationDetail.vue'
  import equipment from '@/pages/revenue/equipment.vue'
  export default {
    components: {
      stationDetail,
      equipment
    },
    data() {
      return {
        revenue: [{
            index: '1',
            title: '总营收'
          },
          {
            index: '2',
            title: '站点'
          },
          {
            index: '3',
            title: '设备'
          }
        ],
        current: 1,
        text: null
      }
    },
    methods: {
      checked(index) {
        this.current = index
        this.text = this.revenue[index].title
        console.log('营收页面', this.current);
      },
    },
    onLoad() {

    }
  }
</script>

<style lang="scss" scoped>
  .revenList {
    padding: 40rpx 34rpx 0 37rpx;
    text-align: center;
    line-height: 72rpx;
  }

  .active {
    position: relative;
    // color: #fff;
    // border-radius: 10rpx;
    background-color: #1890FF !important;
    // background-color: red !important;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>